<template>
    <div class="content-wrap">
        <!--pages/reword/reword.wxml-->
        <div class="column" :class="{'padding-bottom':doctorinfo.is_pay  ==  1}">
            <div class="doctor-info-wrap column" :class="{'active':infoOpen == true}">
                <div class='doctor-wrap flex'>
                    <div class="avaral-img flex" :class="{'busy':doctorinfo.online_status == 0}">
                        <img :src='doctorinfo.avatar' class='imgActive'></img>
                        <span class='status'>{{doctorinfo.online_status == 1?'在诊':'离线'}}</span>
                    </div>
                    <div class='doctor-info column'>
                        <div class='name flex'>{{doctorinfo.doctorname}}
                            <span>{{doctorinfo.descr}}</span>
                        </div>
                        <div class='hospital flex'>{{doctorinfo.orgname}}</div>
                        <div class='label flex' v-if="doctorinfo">
                            <span class='fColor' v-for="(item,index) in doctorinfo.doctor_illness" :key="index">{{item}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class=''></div>
            <div class='reword-wrap' :style='{height:areaHeight + "px"}' @scroll="handleScroll" v-if="chatList.length">
                <div class='stage-item column' v-for="(item,index) in chatList" :key="index" :id="item.mid" >
                    <div class='stage flex' v-if="item.type == 'diagnosis'">第{{item.message}}次复诊（{{item.date}}）</div>
                    <div class='column' v-if="item.type != 'diagnosis'">
                        <div class='reword-item column' v-if="item.is_me == false">
                            <span class='time'>{{item.date}}</span>
                            <div class='doctor item flex'>
                                <div class='item-left column'>
                                    <img :src='doctorinfo.avatar' ></img>
                                </div>
                                <div class='item-right flex'>
                                    <!-- 文字样式 -->
                                    <div class='text-wrap flex' v-if="item.type == 'message'">
                                        <span class='text'>{{item.message}}</span>
                                    </div>
                                    <!-- 语音 -->
                                    <div class='voice-wrap flex' v-if="item.type == 'mp3'">
                                        <div class='voice flex' @click='playVoice(item.message,index)' :style='{width:80 + (item.duration-1) *3 + "px"}'>
                                            <img src='../assets/wifi-black.png' v-if="item.voiceStatus == 0"></img>
                                            <img src='../assets/wifi-black.gif' v-else></img>
                                            <span>{{item.duration}}"</span>
                                        </div>
                                        <!-- <span class='red-dot'></span> -->
                                    </div>
                                    <!-- 图片样式 -->
                                    <div class='img-wrap flex' v-if="item.type == 'img'" @click="previewImgTap(item.message)">
                                        <img :src='item.message' ></img>
                                    </div>
                                    <!-- 小视频样式 -->
                                    <div class='img-wrap flex' v-if="item.type == 'file'">
                                        <img :src='item.img' ></img>
                                        <div class='bg flex' @click='playVideoTap(item.message,item.img)'>
                                            <img src='../assets/play.png'></img>
                                            <span class='video-time'>{{item.duration}}M</span>
                                        </div>
                                    </div>
                                    <!-- 问诊单样式 -->
                                    <div class='inquiry-wrap flex' v-if="item.type == 'bill'">
                                        <div class='inquiry column'>
                                            <div class='title column '>
                                                <span class='subtitle'>问诊单</span>
                                                <span class='mask'>(点击填入您的资料，医生方可进行会诊)</span>
                                            </div>
                                            <div class='fill flex' @click='goinquirySingleTap'>点击填入</div>
                                        </div>
                                    </div>
                                    <!-- 诊断开方 -->
                                    <div class='inquiry-wrap flex' v-if="item.type == 'recipe' && item.status != 1 && item.recipestatus != 301 && item.creatTime > 0">
                                        <div class='inquiry column'>
                                            <div class='title flex sick'>
                                                <div class='overhidden sick-name flex'>
                                                    诊断：
                                                    <span>{{item.str}}</span>
                                                </div>
                                                <div class='period flex'>{{item.time}}</div>
                                            </div>
                                            <div class='title recipe' v-if="item.is_see == true">处方一：
                                                <span v-for="(items,key) in item.wareList" :key="key" class='durg-item'>{{items.WARENAME}} {{items.WAREQTY}}g,</span>
                                            </div>
                                            <div class='content column'>
                                                <span>医生已开处方</span>
                                                <span>请根据调理方案购药服药。</span>
                                                <span class='mask'>备：本次处方只针对现有病情，请尽快购药治疗。</span>
                                            </div>
                                            <div class='fill flex'  @click='buyDurgTap(item.message)'>点击取药</div>
                                        </div>
                                    </div>

                                    <!-- 处方失效 -->
                                    <div class='inquiry-wrap flex' v-if="item.recipestatus == 301">
                                        <div class='inquiry column'>
                                            <div class='title flex sick invalid'>
                                                <div class='overhidden pay-sick flex'> 诊断：
                                                    <span>{{item.str}}</span>
                                                </div>
                                                <div class='invalid flex'>已失效</div>
                                            </div>
                                            <div class='content column invalid'>
                                                <span>医生已开处方</span>
                                                <span>请根据调理方案购药服药。</span>
                                                <span class='mask'>备：本次处方只针对现有病情，请尽快购药治疗。</span>
                                            </div>
                                            <div class='fill invalid flex'>该处方已失效，请重新就诊抓药</div>
                                        </div>
                                    </div>
                                    <!-- 已购处方 -->
                                    <div class='inquiry-wrap flex' v-if="item.type == 'paysuccess' && item.status == 1 || item.type == 'recipe' && item.status == 1">
                                        <div class='inquiry column'>
                                            <div class='title flex sick '>
                                                <div class='overhidden pay-sick flex'>
                                                    诊断：
                                                    <span>{{item.str}}</span>
                                                </div>
                                                <div class='fill flex'>已购药</div>
                                            </div>
                                            <!-- <div class='pharmacy'>内服饮片 长沙-同仁堂</div> -->
                                            <div class='title recipe '>处方一：
                                                <span v-for="(items,key) in item.wareList" :key="key" class='durg-item'>{{items.WARENAME}} {{items.WAREQTY}}g,</span>
                                            </div>
                                            <!-- <div class='title'>
                                            <span>药态：传统饮片</span>
                                        </div> -->
                                            <div class='fill flex' @click='goDurgDetailTap(item.message)'>点击查看详情 </div>
                                        </div>
                                    </div>
                                    <!-- 服务已完成 -->
                                    <div class='inquiry-wrap flex' v-if="item.type == 'evaluate'">
                                        <div class='inquiry column'>
                                            <div class='title flex'>
                                                <span class='service'>服务已完成，请为我的服务给出评价吧！</span>
                                            </div>
                                            <div class='fill flex' @click='inquiryTap'>点击评价</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class='reword-item column' v-else>
                            <span class='time align-right'>{{item.date}}</span>
                            <div class='me item flex'>
                                <div class='item-right flex'>
                                    <!-- 文字样式 -->
                                    <div class='text-wrap flex' v-if="item.type == 'message'">
                                        <span class='status'>{{item.isRead == 0?'未读':'已读'}}</span>
                                        <span class='text'>{{item.message}}</span>
                                    </div>
                                    <!-- 语音 -->
                                    <div class='voice-wrap flex' v-if="item.type == 'mp3'">
                                        <span class='status'>{{item.isRead == 0?'未读':'已读'}}</span>
                                        <div class='voice flex' @click='playVoice(item.message,index)' :style='{width:80 + (item.duration-1) *3 + "px"}'>
                                            <span>{{item.duration}}"</span>
                                            <img src='../assets/wifi-left.png' v-if="item.voiceStatus == 0"></img>
                                            <img src='../assets/wifi-left.gif' v-else></img>
                                        </div>
                                    </div>
                                    <!-- 图片样式 -->
                                    <div class='img-wrap flex' v-if="item.type == 'img'" @click="previewImgTap(item.message)">
                                        <span class='status'>{{item.isRead == 0?'未读':'已读'}}</span>
                                        <img :src='item.message' ></img>
                                    </div>
                                    <!-- 小视频样式 -->
                                    <div class='img-wrap flex' v-if="item.type == 'file'">
                                        <span class='status'>{{item.isRead == 0?'未读':'已读'}}</span>
                                        <img :src='item.img' ></img>
                                        <div class='bg flex' @click='playVideoTap(item.message,item.img)'>
                                            <img src='../assets/play.png'></img>
                                            <span class='video-time'>{{item.duration}}M</span>
                                        </div>
                                    </div>
                                    <!-- 填写问诊单 -->
                                    <div class='inquiry-wrap flex' v-if="item.type == 'inquiry'">
                                        <span class='status'>{{item.isRead == 0?'未读':'已读'}}</span>
                                        <div class='from-wrapper column'>
                                            <div class='from-title column '>
                                                <span class='nickname'>{{item.message.user.NAME}}</span>
                                                <span class='name-detail'>{{item.message.user.AGE}}  {{item.message.user.SEX}}  {{item.message.user.AREA}}</span>
                                            </div>
                                            <div class='from-content column'>
                                                <div class='ht-msg flex'>
                                                    <div class='height flex'>
                                                        <span>身高 </span>
                                                        <span>{{item.message.user.STATURE}}cm</span>
                                                    </div>
                                                    <div class='weight flex'>
                                                        <span>体重 </span>
                                                        <span>{{item.message.user.WEIGHT}}kg</span>
                                                    </div>
                                                </div>
                                                <div class='symptoms-des flex'>
                                                    <span>病症描述 </span>
                                                    <span>{{item.message.user.DISEASE}}</span>
                                                </div>
                                                <div class='symptoms-img flex'>
                                                    <span>舌照面照</span>
                                                    <div class='img-wrapper flex'>
                                                        <img class='imgActive'  :src='item.message.user.TONGUEIMG1' @click="previewImgTap(item.message.user.TONGUEIMG1)"></img>
                                                        <img class='imgActive'  :src='item.message.user.TONGUEIMG2' @click="previewImgTap(item.message.user.TONGUEIMG2)"></img>
                                                        <img class='imgActive'  :src='item.message.user.FACEIMG1' @click="previewImgTap(item.message.user.FACEIMG1)"></img>
                                                        <img class='imgActive'  :src='item.message.user.FACEIMG2' @click="previewImgTap(item.message.user.FACEIMG2)"></img>
                                                    </div>
                                                </div>
                                                <div class='symptoms-img flex'>
                                                    <span>以往病例</span>
                                                    <div class='img-wrapper flex'>
                                                        <img class='imgActive'  :src='items.ANAMNESISID' @click="previewImgTap(items.ANAMNESISID)" v-for="(items,key) in item.message.anamnesis"></img>
                                                    </div>
                                                </div>
                                                <div class='symptoms-question flex'>
                                                    <div>问诊单问题</div>
                                                    <div @click='lookquestionDetail(item.message.id)' class="flex">查看详情</div>
                                                </div>
                                                <div class='symptoms-detail flex'>{{item.message.str}}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class='item-left column'>
                                    <img :src='userinfo.avatar' ></img>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class='feedback-wrap column' v-if="doctorinfo.is_feedback == 0">
                    <div class='feedback-btn flex' @click='feedbackTap'>
                        <img src='../assets/feedback.png'></img>
                        诊后反馈
                    </div>
                    <div class='mask flex'>备注：提交诊后反馈之后，医生看到后会进行相应的回复</div>
                </div>
            </div>
            <div class='enjoy flex' @click='enjoyTap'>
                <img src='../assets/enjoy.png'></img>
            </div>
            <div class="pay-for-btn flex" :class="{'margin':!chatList.length}" @click='payForTap' v-if="doctorinfo.is_pay  ==  0">
                <div class="flex">支付诊断费{{doctorinfo.money}}元进行咨询</div>
            </div>
            <div class="new-info flex" :class="{'active':newInfo > 0}" @click='goNewInfo' hidden="newInfo <= 0">您有{{newInfo}}条新消息</div>
            <div class='choose-wrap flex' v-if="doctorinfo.is_pay  ==  1">
                <div class='choose-item column' @click='seeDoctorInfo'>
                    <img src='../assets/doctorinfo.png'></img>
                    <span>医生信息</span>
                </div>
                <div class='choose-item column'>
                    <img src='../assets/camera.png'></img>
                    <span>发送图片</span>
                    <input type="file" class="input-file" accept="image/*" @change="sendPictureTap($event)"  multiple="multiple"/>
                </div>
                <div class='choose-item column'>
                    <img src='../assets/radio.png'></img>
                    <span>小视频</span>
                    <input type="file" class="input-file"  @change="sendAudioTap($event)" accept="video/*"/>
                </div>
            </div>
            <div class="footer flex" v-if="doctorinfo.is_pay  ==  1">
                <div class='keyboard column' @click='sendTxtTap'>
                    <img :src="showVoice? keyboard :laba "></img>
                </div>
                <div class='voice flex':class="{'hover':gif}" @touchstart='voiceStartTap'  v-if="showVoice" @touchcancel="voiceEndTap"  @touchend="voiceEndTap">
                    <img src='../assets/voice.png'></img>
                    <span>长按录音</span>
                </div>
                <div class='input flex' v-if="!showVoice">
                    <input type='text' placeholder='请输入内容' v-model="content"  cursor-spacing="10" ></input>
                    <div class='send-btn flex' @click='sendMsgTap'>发送</div>
                </div>
            </div>
            <div class='layer flex' v-if="layer">
                <!-- 支付咨询费 -->
                <div class="windows column"  :class="{'heightShow':consultShow}" v-if="consultShow">
                    <div class='title noborder flex'>
                        <span></span>
                        <div class='close-wrap flex' @click='closeTap'>
                            <img src='../assets/close.png'></img>
                        </div>
                    </div>
                    <div class='projrct-wrap column'>
                        <div class='project flex'>
                            <span class='label'>支付项目：</span>
                            <span class="txt">{{doctorinfo.doctorname}}医生就诊咨询费</span>
                        </div>
                        <div class='project flex'>
                            <span class='label'>支付金额：</span>
                            <span class='price'>{{doctorinfo.money}}元</span>
                        </div>
                        <div class='mask flex'>备注：支付成功后，医生看到后将及时进行回复，医生下诊之后如果还未进行回复，系统将自动退还。</div>
                        <div class='pay-btn flex' @click='payfeeTap'>确定支付</div>
                    </div>
                </div>
                <!-- 支付感谢金 -->
                <div class="windows column" :class="{'heightShow':gratitudeShow}" v-if="gratitudeShow">
                    <div class='title flex'>
                        <span>给{{doctorinfo.doctorname}}医生感谢金</span>
                        <div class='close-wrap flex' @click='closeTap'>
                            <img src='../assets/close.png'></img>
                        </div>
                    </div>
                    <div class='gratitude-wrap flex'>
                        <div class="gratitude-item flex" :class="{'active':gratitudeIdx == index}" v-for="(item,index) in gratitudeList" :key="index" @click="chooseMoneyTap(index,item.txt)">{{item.txt}}元</div>
                    </div>
                    <div class='other-money flex'>
                        <span>金额：</span>
                        <input type='number' v-model='money'></input>
                        <span>元</span>
                    </div>
                    <div class='pay-btn flex' @click='payMoneyTap'>支付</div>
                    <!-- payMoneyTap -->
                    <div class='mask flex'>备注：感谢金所有金额直接进入医生账户</div>
                </div>
                <!-- 给医生进行评价 -->
                <div class="windows column" :class="{'heightShow':evaluateShow}" v-if="evaluateShow">
                    <div class='title flex'>
                        <span>给{{doctorinfo.doctorname}}医生进行评价</span>
                        <div class='close-wrap flex' @click='closeTap'>
                            <img src='../assets/close.png'></img>
                        </div>
                    </div>
                    <div class='evaluate-wrap column'>
                        <div class='label flex'>医生整体评价:</div>
                        <div class='grade flex'>
                            <div class="grade-item flex" :class="{'active':gradeIdx == item.type}" v-for="(item,index) in gradeList" :key="index" @click='chooseGradeTap(item.type)'>
                                <img :src="gradeIdx >= item.type ? item.imgActive:item.img"></img>
                                <span>{{item.txt}}</span>
                            </div>
                        </div>
                        <div class='remark flex'>
                            <span>评语：</span>
                            <textarea v-model='remark' placeholder='请输入评语'></textarea>
                        </div>
                        <div class='remark-list flex'>
                            <div class="remark-item flex" :class="{'active':item.status == 1}" v-for="(item,index) in remarkList" :key="index"  @click='chooseRemarkTap(index,item.status)'>{{item.txt}}</div>
                        </div>
                        <div class='pay-btn flex' @click='submitRemarkTap'>提交</div>
                    </div>
                </div>
                <!-- 授权 -->
                <!-- <div class="location-windows column" :class="{'heightShow':locShow}" v-if="locShow">
                    <img src='../assets/close.png' @click='closeTap'></img>
                    <div class='txt flex'>授权失败，请重新授权</div>
                    <div class='accredit-btn flex' open-type="openSetting">重新授权</div>
                </div> -->
            </div>
        </div>
        <!-- 加载中 -->
        <div class='loading column' v-if="showLoading">
            <img src='../assets/load.gif'></img>
            <span>拼命加载中...</span>
        </div>
        <div class='gif-wrap column' v-if="gif">
            <img src='../assets/hold-record.svg'></img>
            录音中({{recordTime}}s)
        </div>
        <!-- 预览图片 -->
        <div class="previewImg-wrap flex" v-if="isShowImg" @click="closeTap">
            <img :src="previewImg">
        </div>
        <!-- 播放视频 -->
        <div class="previewImg-wrap flex" v-if="isShowVideo">
            <video id="myvideo" 
                  :src="videoSrc" 
                  autoplay="true" 
                  :poster="posterUrl" 
                  width="100%"
            　　　height="100%"  
                  controls  
                  style="object-fit:fill"  
                  webkit-playsinline="true" 
                  x-webkit-airplay="true" 
                  playsinline="true" 
                  x5-video-player-type="h5" 
                  x5-video-orientation="h5"
                  x5-video-player-fullscreen="true" 
                  preload="auto" ></video>
            <img src="../assets/close.png" class="close-img"  @click="closeTap">
        </div>
        <!-- <div class="online" :class="{'underLine':underLine}" @click='onlineTap'>网络连接失败,点击重新连接</div> -->
    </div>
</template>

<script>
import utils from "../base/js/util.js";
import { Loadmore, Toast, Indicator } from "mint-ui";
import {
  doctorsinfo,
  chatLog,
  payreward,
  evaluatedoctor,
  binddoctorid,
  getnewregistrationid,
  payregistration,
  createWeixinJssdk,
  upVoiceUrl
} from "./../api/index";
import { upLoadUrl, upVideoUrl } from "./../config/index";
import keyboard from "../assets/keyboard.png";
import laba from "../assets/laba.png";
import axios from "axios";
import wx from "weixin-js-sdk";
import Recorder from "recorder-js";
import starActive from "../assets/star-active.png";
import star from "../assets/star.png";

export default {
  data() {
    return {
      keyboard,
      laba,
      flag: true, //防止多次跳转的变量
      areaHeight: null, //聊天区域的高度
      consultShow: false, //支付咨询费弹窗
      gratitudeShow: false, //支付感谢金窗口
      evaluateShow: false, //评价窗口
      layer: false, //蒙层显示
      gratitudeList: [
        {
          txt: "5"
        },
        {
          txt: "10"
        },
        {
          txt: "15"
        },
        {
          txt: "20"
        }
      ], //感谢金数组
      gratitudeIdx: -1, //感谢金索引
      chooseMoney: "",
      money: "", //感谢金
      gradeList: [
        {
          img: star,
          imgActive: starActive,
          type: 1
        },
        {
          img: star,
          imgActive: starActive,
          type: 2
        },
        {
          img: star,
          imgActive: starActive,
          type: 3
        },
        {
          img: star,
          imgActive: starActive,
          type: 4
        },
        {
          img: star,
          imgActive: starActive,
          type: 5
        }
      ], //评价分数组
      gradeIdx: 5, //评价分索引
      remarkList: [
        {
          txt: "响应速度很快",
          status: 0
        },
        {
          txt: "回答很专业",
          status: 0
        },
        {
          txt: "意见很有帮助",
          status: 0
        },
        {
          txt: "讲解很细致",
          status: 0
        },
        {
          txt: "回答的及时",
          status: 0
        },
        {
          txt: "态度很好",
          status: 0
        }
      ], //评语数组
      remark: "", //评语
      showVoice: false, // 显示/隐藏录入语音输入文字
      startTime: "", //开始录音的时间
      endTime: "", //结束录音的时间
      content: "", //输入的文字内容
      activeimg: [], //发送的图片
      socketUrl: "wss://socket.zhenheyiliao.cn/",
      doctorid: "", //医生id
      doctoruserid: "", //医生的userid
      patientid: "", //患者id
      userid: "", //患者的userid
      registrationid: 1, //挂号单id
      recipeid: 1, //处方id
      doctorinfo: "", //医生详情
      userinfo: "", //患者信息
      chatList: [], //聊天数组,
      innerAudioContext: null, //播放音频组件
      recorderManager: null, //录音组件
      page: 0,
      pagesize: 10,
      scrollTop: "", //向上滚动的距离
      newInfo: 0, //新消息数量
      showLoading: true, //加载中
      gif: false,
      timer: null,
      recordTime: 0, //录音时长不应少于1秒
      recordTimer: null,
      sendRecordFlag: true, //上划取消发送录音变量
      underLine: false, //socket是否连接
      backgroundStatus: false, //页面是否进入后台
      unloadStatus: false, //页面是否卸载
      source: "", //绑定医生的来源状态
      infoOpen: false, //医生信息的窗口
      windowHeight: "", //可用区域的高度
      windowWidth: "", //可用区域的宽度
      isSrocllMore: false, //是否能加载下一页
      locShow: false, //授权窗口
      voiceidx: 0, //当前播放音频的下标索引
      connectNum: 0, //SOCKET連接次数
      outTime: 1500,
      is_read: 0,
      activeImage: [], //预览照片数组
      previewImg: "", //预览图片url
      videoSrc: "", //小视频url
      posterUrl: "", //小视频的缩略图
      allLoaded: false,
      isShowImg: false,
      isShowVideo: false
    };
  },
  //关闭socket
  beforeRouteLeave(to, from, next) {
    if (this.websock) {
      this.websock.close();
    }
    next();
  },
  //监听浏览器关闭
  onbeforeunload() {
    if (this.websock) {
      this.websock.close();
    }
  },
  created() {
    let _this = this;
    if (!!navigator.userAgent.match(/AppleWebKit.*Mobile.*/)) {
      // 移动端 取消浏览器长按事件 （否则在录音时会有弹出框）
      document.oncontextmenu = _this.touchmoveDefault;
      //禁止滑动事件 防止在长按时 下拉窗口不能触发stopRecord
      document.body.addEventListener("touchmove", _this.touchmoveDefault, {
        passive: false     
      });
    }
    this.stopTouchendPropagationAfterScroll();
  },
  mounted() {
    let mstr = sessionStorage.getItem("mstr");
    if (this.websock) {
      this.websock.close();
    }
    this.windowHeight =
      window.innerHeight ||
      document.documentElement.clientHeight ||
      document.body.clientHeight;
    this.windowWidth =
      window.innerWidth ||
      document.documentElement.clientWidth ||
      document.body.clientWidth;
    //获取doctorid信息
    if (this.$route.params.doctorid) {
      this.doctorid = this.$route.params.doctorid;
      sessionStorage.setItem("doctorid", this.$route.params.doctorid);
    } else {
      this.doctorid = sessionStorage.getItem("doctorid");
    }
    //获取doctoruserid信息
    if (this.$route.params.doctoruserid) {
      this.doctoruserid = this.$route.params.doctoruserid;
      sessionStorage.setItem("doctoruserid", this.$route.params.doctoruserid);
    } else {
      this.doctoruserid = sessionStorage.getItem("doctoruserid");
    }
    //获取patientid信息
    if (this.$route.params.patientid) {
      this.patientid = this.$route.params.patientid;
      sessionStorage.setItem("patientid", this.$route.params.patientid);
    } else {
      this.patientid = sessionStorage.getItem("patientid");
    }
    //获取userid信息
    if (this.$route.params.userid) {
      this.userid = this.$route.params.userid;
      sessionStorage.setItem("userid", this.$route.params.userid);
    } else {
      this.userid = sessionStorage.getItem("userid");
    }
    //注册播放音频组件
    this.innerAudioContext = new Audio();
    this.userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
    //注册录音组件
    let url = window.location.href;
    createWeixinJssdk(mstr, url).then(res => {
      if (res.data.status === 1) {
        let list = res.data.data;
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，
          appId: list.appId, // 必填，公众号的唯一标识
          timestamp: list.timestamp.toString(), // 必填，生成签名的时间戳
          nonceStr: list.noncestr, // 必填，生成签名的随机串
          signature: list.signature, // 必填，签名
          jsApiList: [
            "startRecord",
            "stopRecord",
            "playVoice",
            "pauseVoice",
            "stopVoice",
            "uploadVoice",
            "downloadVoice",
            "downloadVoice"
          ] // 必填，需要使用的JS接口列表
          // 接口 开始录音接口 停止录音接口 播放语音接口 暂停播放接口 停止播放接口 上传语音接口 下载语音接口 识别音频并返回识别结果接口
        });
        // config信息验证后才执行
        this.getDoctorDetail();
      }
    });
  },
  methods: {
    //防止touchend事件后无法触发滚动事件
    stopTouchendPropagationAfterScroll() {
      let locked = false;
      window.addEventListener(
        "touchmove",
        function(ev) {
          locked ||
            ((locked = true),
            window.addEventListener(
              "touchend",
              this.stopTouchendPropagation,
              true
            ));
        },
        true
      );
    },
    stopTouchendPropagation(ev) {
      ev.stopPropagation();
      window.removeEventListener(
        "touchend",
        this.stopTouchendPropagation,
        true
      );
      locked = false;
    },
    //滚动
    handleScroll(e) {
      this.scrollTop = e.target.scrollHeight - e.target.scrollTop;
      if (this.scrollTop <= 1000) {
        this.newInfo = 0;
      }
      if (e.target.scrollTop <= 10) {
        this.getMoreChatWord();
      }
    },
    initWebpack() {
      //初始化websocket
      this.websock = new WebSocket(this.socketUrl); //这里面的this都指向vue
      this.websock.onopen = this.websocketopen;
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onclose = this.websocketclose;
      this.websock.onerror = this.websocketerror;
    },
    websocketopen() {
      //打开websock
      this.underLine = false;
      //登录
      this.loginSock();
    },
    //登录websock
    loginSock() {
      let inquiryData = JSON.parse(sessionStorage.getItem("inquiryData"));
      let payforData = JSON.parse(sessionStorage.getItem("payforData"));
      let feekback = JSON.parse(sessionStorage.getItem("feekback"));
      //socket登录信息
      let connectData = {
        imgurl: this.userinfo.avatar,
        name: this.userinfo.truename,
        type: "login",
        uid: this.patientid,
        to_id: this.doctorid,
        status: 2,
        registrationid: this.registrationid
      };
      // 登录
      this.websock.send(JSON.stringify(connectData));
      //判断是否需要发送问诊单
      if (inquiryData) {
        this.sendSingle(inquiryData);
      }
      //判断是否需要发送处方支付成功
      if (payforData) {
        this.payForSuccess(payforData);
      }
      //反馈成功
      if (feekback) {
        this.doctorinfo.is_feedback = 1;
        sessionStorage.removeItem("feekback");
      }
    },
    //发送问诊单给医生
    sendSingle(inquiryData) {
      let date = Date.parse(new Date());
      let sendMsg = {
        uid: this.patientid,
        to_id: this.doctorid,
        type: "inquiry",
        status: 2,
        message: inquiryData.inquiryid,
        mid: `user_${this.patientid}-${date}`,
        date: utils.formatTime(new Date()),
        isRead: this.is_read
      };
      this.websock.send(JSON.stringify(sendMsg));

      sessionStorage.removeItem("inquiryData");
      this.doctorinfo.is_inquiry_bill = 1;
    },
    //发送处方支付成功
    payForSuccess(payforData) {
      let date = Date.parse(new Date());
      let sendMsg = {
        uid: this.patientid,
        to_id: this.doctorid,
        type: "paysuccess",
        status: 2,
        message: payforData.recipeid,
        mid: `user_${this.patientid}-${date}`,
        date: utils.formatTime(new Date())
      };
      //用户发送信息
      this.websock.send(JSON.stringify(sendMsg));
      sessionStorage.removeItem("payforData");
    },
    websocketonmessage(e) {
      //数据接收
      let resultData = JSON.parse(e.data);
      console.log(resultData);
      //目前在线人数
      if (resultData.type === "userCount") {
        if (resultData.data.count === 1) {
          this.is_read = 0;
        } else {
          for (let i = 0; i < this.chatList.length; i++) {
            this.chatList[i].isRead = 1;
          }
          this.is_read = 1;
        }
      }
      // 用户第一次进来医生自动推送欢迎语
      if (resultData.type === "status" && resultData.data.isdoctor === 0) {
        let msgdata = {
          uid: this.patientid,
          to_id: this.doctorid,
          message: resultData.data.doctorContent,
          type: "doctor",
          status: 2,
          diagnosis: resultData.data.diagnosis
        };
        this.websock.send(JSON.stringify(msgdata));
      }

      // 用户第一次进来医生自动问诊单
      if (resultData.type === "status" && resultData.data.isbill === 0) {
        let msgdata = {
          uid: this.patientid,
          to_id: this.doctorid,
          type: "bill",
          status: 2
        };
        this.websock.send(JSON.stringify(msgdata));
      }
      //接收消息
      if (resultData.type === "message") {
        //处方类型需要转化一下过期时间
        if (resultData.data.type === "recipe") {
          this.recipeid = resultData.data.message;
          resultData.data.creatTime = resultData.data.time;
          if(resultData.data.time>0){
            resultData.data.time = utils.formatEndTime(resultData.data.time);
          }else{
            resultData.data.time = '已过期';
          }
        }
        let msgdata = {
          duration: resultData.data.duration,
          uid: resultData.data.uid,
          message: resultData.data.message,
          type: resultData.data.type,
          mid: resultData.data.mid,
          date: resultData.data.localDate,
          status: resultData.data.status,
          img: resultData.data.img,
          str: resultData.data.str,
          time: resultData.data.time,
          creatTime: resultData.data.creatTime,
          is_see: resultData.data.is_see,
          voiceStatus: 0,
          recipestatus: resultData.data.recipestatus,
          wareList: resultData.data.wareList,
          is_me: false
        };

        //支付成功更改处方状态
        if (resultData.data.type === "paysuccess") {
          for (let i = 0; i < this.chatList.length; i++) {
            if (
              resultData.data.message == this.chatList[i].message &&
              this.chatList[i].type == "recipe"
            ) {
              this.chatList[i].status = 1;
            }
          }
        }
        //图片类型  把图片存入数组
        if (resultData.data.type === "img") {
          this.activeImage.push(resultData.data.message);
        }
        //问诊单类型
        if (resultData.data.type === "inquiry") {
          this.activeImage.push(resultData.data.message.user.TONGUEIMG1);
          this.activeImage.push(resultData.data.message.user.TONGUEIMG2);
          this.activeImage.push(resultData.data.message.user.FACEIMG1);
          this.activeImage.push(resultData.data.message.user.FACEIMG2);
          for (let j = 0; j < resultData.data.message.anamnesis.length; j++) {
            this.activeImage.push(
              resultData.data.message.anamnesis[j].ANAMNESISID
            );
          }
          this.doctorinfo.is_inquiry_bill = 1;
          msgdata = {
            duration: resultData.data.duration,
            uid: resultData.data.uid,
            message: resultData.data.message,
            type: resultData.data.type,
            mid: resultData.data.mid,
            date: resultData.data.localDate,
            status: resultData.data.status,
            img: resultData.data.img,
            str: resultData.data.str,
            time: resultData.data.time,
            is_see: resultData.data.is_see,
            wareList: resultData.data.wareList,
            is_me: true
          };
        }
        //欢迎词
        if (resultData.data.type === "bill") {
          this.infoOpen = false;
        }
        //消息类型如果是支付成功只需修改处方粘贴  不用新添加进聊天数组
        if (resultData.data.type !== "paysuccess") {
          this.chatList.push(msgdata);
        }

        //滚动聊天页面  高度大于800时不自动跳转到最新消息
        if (this.scrollTop < 1000) {
          //跳转到最新的那条记录
          this.$nextTick(() => {
            let container = this.$el.querySelector("#" + resultData.data.mid);
            container.scrollIntoView();
          });
          this.newInfo = 0;
        } else {
          ++this.newInfo;
        }
      }
    },
    websocketclose() {
      //关闭
      console.log("WebSocket关闭");
    },
    websocketerror() {
      //失败
      console.log("WebSocket连接失败");
    },
    //发送文本消息
    sendMsgTap() {
      if (this.doctorinfo.is_inquiry_bill == 1) {
        if (!this.content.replace(/(^\s*)|(\s*$)/g, "")) {
          Toast({
            message: "请输入内容",
            position: "center",
            duration: 2000
          });
          return false;
        }
        let date = Date.parse(new Date());
        let sendMsg = {
          uid: this.patientid,
          to_id: this.doctorid,
          type: "message",
          status: 2,
          message: this.content,
          mid: `user_${this.patientid}-${date}`,
          date: utils.formatTime(new Date()),
          isRead: this.is_read
        };
        this.websock.send(JSON.stringify(sendMsg));
        let data = {
          uid: this.patientid,
          to_id: this.doctorid,
          type: "message",
          status: 2,
          message: this.content,
          mid: `user_${this.patientid}-${date}`,
          date: utils.formatTime(new Date()),
          isRead: this.is_read,
          is_me: true
        };
        this.chatList.push(data);
        this.flag = true;
        this.content = "";
        //跳转到最新的那条记录
        this.$nextTick(() => {
          let container = this.$el.querySelector(
            `#user_${this.patientid}-${date}`
          );
          container.scrollIntoView();
        });
      } else {
        Toast({
          message: "请先填写问诊单",
          position: "center",
          duration: 2000
        });
      }
    },
    //发送图片
    sendPictureTap(e) {
      if (this.doctorinfo.is_inquiry_bill == 1) {
        let fileList = e.target.files;
        this.uploadDIY(fileList, 0, 0, 0, fileList.length);
      } else {
        Toast({
          message: "请先填写问诊单",
          position: "center",
          duration: 2000
        });
      }
    },
    //上传多张图片
    uploadDIY(fileList, successUp, failUp, i, length) {
      this.spinner = true;
      let param = new FormData(); //创建form对象
      let size = fileList[i].size;
      Indicator.open("发送中");
      param.append("image", fileList[i], fileList[i].name); //);//通过append向form对象添加数据
      axios
        .post(upLoadUrl, param)
        .then(res => {
          if (res.data.status === 1) {
            let url = res.data.data.url;
            let path = res.data.data.path;
            let date = Date.parse(new Date());
            let sendMsg = {
              uid: this.patientid,
              to_id: this.doctorid,
              type: "img",
              status: 2,
              message: path,
              mid: `user_${this.patientid}-${date}`,
              isRead: this.is_read
            };
            this.websock.send(JSON.stringify(sendMsg));
            this.activeImage.push(url);
            let data = {
              uid: this.patientid,
              to_id: this.doctorid,
              type: "img",
              status: 2,
              message: url,
              mid: `user_${this.patientid}-${date}`,
              date: utils.formatTime(new Date()),
              is_me: true,
              isRead: this.is_read
            };
            this.chatList.push(data);
            //跳转到最新的那条记录
            this.$nextTick(() => {
              let container = this.$el.querySelector(
                "#" + this.chatList[this.chatList.length - 1].mid
              );
              container.scrollIntoView();
            });
            successUp++;
            i++;
            if (successUp !== length) {
              this.uploadDIY(fileList, successUp, failUp, i, length);
            } else {
              Indicator.close();
            }
          }
        })
        .catch(err => {
          failUp++;
          Indicator.close();
          Toast({
            message: "上传图片失败！",
            position: "center",
            duration: 2000
          });
        });
    },
    //发送小视频
    sendAudioTap(e) {
      if (this.doctorinfo.is_inquiry_bill == 1) {
        let file = e.target.files;
        let param = new FormData(); //创建form对象
        let size = file[0].size / 1024 / 1024;
        if (size > 10) {
          Toast({
            message: "请上传小于10M的视频",
            position: "center",
            duration: 2000
          });
          return false;
        }
        param.append("mp4", file[0], file[0].name); //);//通过append向form对象添加数据
        Indicator.open("发送中");
        axios
          .post(upVideoUrl, param)
          .then(res => {
            console.log("上传结果", res.data);
            if (res.data.status === 1) {
              let url = res.data.data.url; //带域名
              let path = res.data.data.path; //不带域名
              let imgUrl = res.data.data.urlimg; //带域名的图片
              let img = res.data.data.img; //不带域名的图片
              let date = Date.parse(new Date());
              let sendMsg = {
                uid: this.patientid,
                to_id: this.doctorid,
                type: "file",
                status: 2,
                message: path,
                mid: `user_${this.patientid}-${date}`,
                duration: size.toFixed(2),
                img: img,
                date: utils.formatTime(new Date()),
                isRead: this.is_read
              };
              this.websock.send(JSON.stringify(sendMsg));
              let data = {
                uid: this.patientid,
                to_id: this.doctorid,
                type: "file",
                status: 2,
                message: url,
                mid: `user_${this.patientid}-${date}`,
                duration: size.toFixed(2),
                img: imgUrl,
                date: utils.formatTime(new Date()),
                is_me: true,
                isRead: this.is_read
              };
              this.chatList.push(data);
              //跳转到最新的那条记录
              this.$nextTick(() => {
                let container = this.$el.querySelector(
                  `#user_${this.patientid}-${date}`
                );
                container.scrollIntoView();
              });
            } else {
              Toast({
                message: res.data.info,
                position: "center",
                duration: 2000
              });
            }
            Indicator.close();
          })
          .catch(err => {
            Indicator.close();
            Toast({
              message: err,
              position: "center",
              duration: 2000
            });
          });
      } else {
        Toast({
          message: "请先填写问诊单",
          position: "center",
          duration: 2000
        });
      }
    },
    //开始录音
    voiceStartTap() {
      if (this.doctorinfo.is_inquiry_bill == 1) {
        if (localStorage.getItem("rainAllowRecord") !== "true") {
          wx.startRecord({
            success: () => {
              localStorage.setItem("rainAllowRecord", "true");
              wx.stopRecord();
              return false;
            },
            cancel: function() {
              alert("用户拒绝授权录音");
            }
          });
        } else {
          this.startTime = Date.parse(new Date());
          this.gif = true;
          //延时300毫秒开始录音
          clearTimeout(this.timer)
          this.timer = setTimeout(()=>{
            //计录音时长
            this.countTime();
            wx.startRecord({
              success: () => {
                this.vicoeEnd();
              },
              fail: err => {
                console.log(err);
                clearTimeout(this.recordTimer);
                wx.stopRecord();
                this.recordTime = 0;
              }
            });
          },300)
        }
      } else {
        Toast({
          message: "请先填写问诊单",
          position: "center",
          duration: 2000
        });
      }
    },
    //停止录音
    voiceEndTap(e) {
      this.endTime = Date.parse(new Date());
      this.gif = false;
      clearTimeout(this.recordTimer);
      //按住时长小于300毫秒
      if(this.endTime - this.startTime < 300){
        clearTimeout(this.timer)
        wx.stopRecord();
        this.recordTime = 0;
        return false;
      //按住时长小于1000毫秒
      }else if (this.endTime - this.startTime <= 1000) {
        setTimeout(() => {
          wx.stopRecord();
          this.recordTime = 0;
        }, 500);
        return false;
      }
      wx.stopRecord({
        success: res => {
          clearTimeout(this.recordTimer);
          if (this.recordTime < 1) {
            this.recordTime = 0;
            Toast({
              message: "录音太短",
              position: "center",
              duration: 2000
            });
            return false;
          }
          this.localId = res.localId;
          this.upVoice(res.localId);
        },
        fail: err => {
          console.log(err);
          setTimeout(() => {
            console.log("延时500停止录音");
            wx.stopRecord();
            clearTimeout(this.recordTimer);
          }, 500);
        }
      });
    },
    countTime() {
      clearTimeout(this.recordTimer);
      this.recordTimer = setTimeout(() => {
        this.recordTime++;
        this.countTime();
      }, 1000);
    },
    // 60秒监听
    vicoeEnd() {
      wx.onVoiceRecordEnd({
        // 录音时间超过一分钟没有停止的时候会执行 complete 回调
        complete: res => {
          Toast({
            message: "60秒停止录音",
            position: "center",
            duration: 2000
          });
          this.localId = res.localId;
          clearTimeout(this.recordTimer);
          this.gif = false;
          this.upVoice(res.localId);
        }
      });
    },
    // 上传语音
    upVoice(localId) {
      let mstr = sessionStorage.getItem("mstr");
      let date = Date.parse(new Date());
      wx.uploadVoice({
        localId: localId, // 需要上传的音频的本地ID，由stopRecord接口获得
        isShowProgressTips: 1, // 默认为1，显示进度提示
        success: res => {
          upVoiceUrl(mstr, res.serverId).then(res => {
            if (res.data.status === 1) {
              let sendMsg = {
                duration: this.recordTime,
                uid: this.patientid,
                to_id: this.doctorid,
                type: "mp3",
                status: 2,
                message: res.data.data.url,
                mid: `user_${this.patientid}-${date}`,
                isRead: this.is_read
              };
              this.websock.send(JSON.stringify(sendMsg));
              let data = {
                duration: this.recordTime,
                uid: this.patientid,
                to_id: this.doctorid,
                type: "mp3",
                status: 2,
                message: res.data.data.url,
                mid: `user_${this.patientid}-${date}`,
                voiceStatus: 0,
                date: utils.formatTime(new Date()),
                is_me: true,
                isRead: this.is_read
              };
              this.chatList.push(data);
              this.recordTime = 0;
              //跳转到最新的那条记录
              this.$nextTick(() => {
                let container = this.$el.querySelector(
                  `#user_${this.patientid}-${date}`
                );
                container.scrollIntoView();
              });
            } else {
              Toast({
                message: res.data.info,
                position: "center",
                duration: 2000
              });
            }
          });
        },
        fail: err => {
          console.log("失败", err, localId);
        }
      });
    },
    //医生详情信息
    getDoctorDetail() {
      let mstr = sessionStorage.getItem("mstr");
      doctorsinfo(mstr, this.doctorid).then(res => {
        if (res.data.status === 1) {
          this.doctorinfo = res.data.data;
          document.title = `与${this.doctorinfo.doctorname}医生会诊记录`;
          this.registrationid = res.data.data.new_registrationid;
          //获取聊天记录
          this.getChatWord();
        }
      });
    },
    //获取聊天记录
    getChatWord() {
      let mstr = sessionStorage.getItem("mstr");
      chatLog(
        mstr,
        this.patientid,
        this.doctorid,
        2,
        this.page,
        this.pagesize
      ).then(res => {
        if (res.data.status === 1) {
          let chatList = res.data.data.reverse();
          let len = chatList.length;
          for (let i = 0; i < len; i++) {
            if (chatList[i].type === "img") {
              this.activeImage.push(chatList[i].message);
            }
            if (chatList[i].type === "mp3") {
              chatList[i].voiceStatus = 0;
            }
            if (chatList[i].type === "inquiry") {
              this.activeImage.push(chatList[i].message.user.TONGUEIMG1);
              this.activeImage.push(chatList[i].message.user.TONGUEIMG2);
              this.activeImage.push(chatList[i].message.user.FACEIMG1);
              this.activeImage.push(chatList[i].message.user.FACEIMG2);
              for (let j = 0; j < chatList[i].message.anamnesis.length; j++) {
                this.activeImage.push(
                  chatList[i].message.anamnesis[j].ANAMNESISID
                );
              }
            }
            if (res.data.data[i].type === "recipe") {
              chatList[i].creatTime = chatList[i].time;
              if(chatList[i].time>0){
                chatList[i].time = utils.formatEndTime(chatList[i].time);
              }else{
                chatList[i].time = '已过期';
              }
              this.recipeid = chatList[i].message;
            }
          }
          this.chatList = chatList;
          ++this.page;
          //判断用户支付的状态  is_pay == 1为已付款
          if (this.doctorinfo.is_pay == 1) {
            this.initWebpack();
            this.areaHeight = this.windowHeight - 130;
          } else {
            this.areaHeight = this.windowHeight - 40;
          }
          //跳转到最新的那条记录
          this.$nextTick(() => {
            let container = this.$el.querySelector(
              "#" + chatList[chatList.length - 1].mid
            );
            container.scrollIntoView();
          });
          this.infoOpen = false;
          this.isSrocllMore = true;
        } else {
          this.chatList = [];
          this.infoOpen = true;
          this.isSrocllMore = false;
        }
        this.showLoading = false;
      });
    },
    //加载更多记录
    getMoreChatWord() {
      if (this.isSrocllMore) {
        this.isSrocllMore = false;
        let mstr = sessionStorage.getItem("mstr");
        Indicator.open("加载中");
        chatLog(
          mstr,
          this.patientid,
          this.doctorid,
          2,
          this.page,
          this.pagesize
        ).then(res => {
          if (res.data.status === 1) {
            res.data.data.reverse();
            let len = res.data.data.length;
            for (let i = 0; i < len; i++) {
              if (res.data.data[i].type === "img") {
                this.activeImage.push(res.data.data[i].message);
              }
              if (res.data.data[i].type === "mp3") {
                res.data.data[i].voiceStatus = 0;
              }
              if (res.data.data[i].type === "inquiry") {
                this.activeImage.push(res.data.data[i].message.user.TONGUEIMG1);
                this.activeImage.push(res.data.data[i].message.user.TONGUEIMG2);
                this.activeImage.push(res.data.data[i].message.user.FACEIMG1);
                this.activeImage.push(res.data.data[i].message.user.FACEIMG2);
                for (
                  let j = 0;
                  j < res.data.data[i].message.anamnesis.length;
                  j++
                ) {
                  this.activeImage.push(
                    res.data.data[i].message.anamnesis[j].ANAMNESISID
                  );
                }
              }
              if (res.data.data[i].type === "recipe") {
                res.data.data[i].creatTime = res.data.data[i].time;
                if(res.data.data[i].time>0){
                  res.data.data[i].time = utils.formatEndTime(res.data.data[i].time);
                }else{
                  res.data.data[i].time = '已过期';
                }
              }
            }
            this.chatList = [...res.data.data, ...this.chatList];
            this.page = this.page + 1;
            //跳转到最新的那条记录
            this.$nextTick(() => {
              let container = this.$el.querySelector(
                "#" + res.data.data[len - 1].mid
              );
              container.scrollIntoView();
            });
          }
          Indicator.close();
          setTimeout(() => {
            this.isSrocllMore = true;
          }, this.outTime);
        });
      }
    },
    //去填写问诊单
    goinquirySingleTap() {
      if (this.doctorinfo.is_inquiry_bill == 0) {
        this.$router.push({
          name: "inquirySingle",
          params: {
            registrationid: this.registrationid,
            doctorid: this.doctorid,
            uid: this.patientid
          }
        });
      } else {
        Toast({
          message: "您已填过问诊单",
          position: "center",
          duration: 2000
        });
      }
    },
    //查看问题详情
    lookquestionDetail(id) {
      this.$router.push({
        name: "answer",
        params: {
          id: id
        }
      });
    },
    //查看医生详情
    seeDoctorInfo() {
      this.infoOpen = !this.infoOpen;
    },
    //关闭弹窗
    closeTap() {
      this.consultShow = false;
      this.gratitudeShow = false;
      this.evaluateShow = false;
      this.layer = false;
      this.remark = "";
      this.isShowImg = false;
      this.isShowVideo = false;
    },
    //弹出支付诊断费窗口
    payForTap() {
      this.consultShow = true;
      this.layer = true;
    },
    //弹出支付感谢金窗口
    enjoyTap() {
      this.gratitudeShow = true;
      this.layer = true;
    },
    //弹出评价窗口
    inquiryTap() {
      this.evaluateShow = true;
      this.layer = true;
    },
    //诊后反馈
    feedbackTap() {
      this.$router.push({
        name: "feedback",
        params: {
          registrationid: this.registrationid,
          doctorid: this.doctorid,
          recipeid: this.recipeid
        }
      });
    },
    //去买药
    buyDurgTap(recipeid) {
      this.$router.push({
        name: "buyDurg",
        params: {
          recipeid: recipeid
        }
      });
    },
    //去查看处方详情
    goDurgDetailTap(id) {
      let recipeData = {
        recipeid: id,
        type: 0
      }
      sessionStorage.setItem('recipeData',JSON.stringify(recipeData))
      this.$router.push({
        name: "fillDurg"
      });
    },
    //选择感谢金
    chooseMoneyTap(index, txt) {
      this.gratitudeIdx = index;
      this.chooseMoney = txt;
    },
    //选择评价等级
    chooseGradeTap(type) {
      this.gradeIdx = type;
    },
    //选择评语
    chooseRemarkTap(index, status) {
      if (status == 0) {
        this.remarkList[index].status = 1;
      } else {
        this.remarkList[index].status = 0;
      }
    },
    //切换输入文字和录入语音
    sendTxtTap() {
      this.showVoice = !this.showVoice;
    },
    //支付感谢金
    payMoneyTap() {
      let mstr = sessionStorage.getItem("mstr");
      if (
        this.gratitudeIdx == -1 &&
        !this.money.replace(/(^\s*)|(\s*$)/g, "")
      ) {
        Toast({
          message: "请输入金额",
          position: "center",
          duration: 2000
        });
        return false;
      }
      let money = "";
      if (this.money) {
        money = this.money;
      } else {
        money = this.chooseMoney;
      }
      if (this.flag) {
        this.flag = false;
        payreward(mstr, money, this.doctorid, this.registrationid).then(res => {
          if (res.data.status === 1) {
            WeixinJSBridge.invoke(
              "getBrandWCPayRequest",
              {
                debug: true,
                appId: "wx3fcdf896d0627cb9", //公众号名称，由商户传入
                timeStamp: res.data.data.timeStamp.toString(), //时间戳，自1970年以来的秒数
                nonceStr: res.data.data.nonceStr, //随机串
                package: res.data.data.package,
                signType: res.data.data.signType, //微信签名方式：
                paySign: res.data.data.paySign, //微信签名
                //这里的信息从后台返回的接口获得。
                jsApiList: ["chooseWXPay"]
              },
              res => {
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                  this.gratitudeShow = false;
                  this.layer = false;
                  this.flag = true;
                  Toast({
                    message: "打赏成功",
                    position: "center",
                    duration: 2000
                  });
                } else {
                  alert("取消打赏！");
                  this.gratitudeShow = false;
                  this.layer = false;
                  this.flag = true;
                }
              }
            );
          } else {
            this.flag = true;
          }
        });
      }
    },
    //提交评价evaluatedoctor
    submitRemarkTap() {
      let mstr = sessionStorage.getItem("mstr");
      if (this.flag) {
        this.flag = false;
        evaluatedoctor(
          mstr,
          this.doctorid,
          this.remark,
          this.gradeIdx,
          this.remarkList[0].status,
          this.remarkList[1].status,
          this.remarkList[2].status,
          this.remarkList[3].status,
          this.remarkList[4].status,
          this.remarkList[5].status,
          this.registrationid
        ).then(res => {
          if (res.data.status === 1) {
            Toast({
              message: "评价成功",
              position: "center",
              duration: 2000
            });
          } else {
            Toast({
              message: res.data.info,
              position: "center",
              duration: 2000
            });
          }
          setTimeout(() => {
            this.evaluateShow = false;
            this.layer = false;
            this.flag = true;
            this.remark = "";
          }, 1000);
        });
      }
    },
    //支付诊费
    payfeeTap() {
      let mstr = sessionStorage.getItem("mstr");
      let money = this.doctorinfo.money;
      if (this.doctorinfo.money <= 0) {
        money = 0.01;
      }
      if (this.flag) {
        this.flag = false;
        payregistration(
          mstr,
          money,
          this.doctorinfo.registrationtype,
          this.patientid,
          this.doctorid,
          this.doctorinfo.srcregid
        ).then(res => {
          if (res.data.status === 1) {
            WeixinJSBridge.invoke(
              "getBrandWCPayRequest",
              {
                debug: true,
                appId: "wx3fcdf896d0627cb9", //公众号名称，由商户传入
                timeStamp: res.data.data.timeStamp.toString(), //时间戳，自1970年以来的秒数
                nonceStr: res.data.data.nonceStr, //随机串
                package: res.data.data.package,
                signType: res.data.data.signType, //微信签名方式：
                paySign: res.data.data.paySign, //微信签名
                //这里的信息从后台返回的接口获得。
                jsApiList: ["chooseWXPay"]
              },
              res => {
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                  this.getNewRegistrationid();
                  this.consultShow = false;
                  this.layer = false;
                  this.flag = true;
                } else {
                  alert("取消支付！");
                  this.consultShow = false;
                  this.layer = false;
                  this.flag = true;
                }
              }
            );
          } else {
            this.flag = true;
          }
        });
      }
    },
    //获取最新挂号单id
    getNewRegistrationid() {
      let mstr = sessionStorage.getItem("mstr");
      getnewregistrationid(mstr, this.patientid, this.doctorid).then(res => {
        if (res.data.status === 1) {
          this.doctorinfo.is_pay = 1;
          this.doctorinfo.is_inquiry_bill = 0;
          this.source = "检索";
          this.registrationid = res.data.data.registrationid;
          this.infoOpen = false;
          this.areaHeight = this.windowHeight - 130;
          //连接socket
          this.initWebpack();
          this.binddoctor();
        }else{
          this.getNewRegistrationid();
        }
      });
    },
    //支付成功绑定医生
    binddoctor() {
      let mstr = sessionStorage.getItem("mstr");
      let options = {
        mstr,
        doctorid: this.doctorid,
        source: this.source
      };
      binddoctorid(options).then(res => {
        if (res.data.status === 1) {
          this.layer = false;
          this.consultShow = false;
        } else {
          Toast({
            message: res.data.info,
            position: "center",
            duration: 2000
          });
        }
      });
    },
    //查看新消息
    goNewInfo() {
      //跳转到最新的那条记录
      this.$nextTick(() => {
        let container = this.$el.querySelector(
          "#" + this.chatList[this.chatList.length - 1].mid
        );
        container.scrollIntoView();
      });
      this.newInfo = 0;
    },
    //预览图片
    previewImgTap(img) {
      this.previewImg = img;
      this.isShowImg = true;
    },
    //查看小视频
    playVideoTap(url, img) {
      this.isShowVideo = true;
      this.videoSrc = url;
      this.posterUrl = img;
    },
    //播放录音
    playVoice(url, index) {
      this.voiceidx = index;
      this.innerAudioContext.src = url;
      this.innerAudioContext.play();
      //切换音频是改变gif图的状态
      for (let i = 0; i < this.chatList.length; i++) {
        this.chatList[i].voiceStatus = 0;
      }
      this.chatList[this.voiceidx].voiceStatus = 1;
      //监听音频播放完毕
      this.innerAudioContext.addEventListener(
        "ended",
        () => {
          for (let i = 0; i < this.chatList.length; i++) {
            this.chatList[i].voiceStatus = 0;
          }
        },
        false
      );
    }
  },
  watch: {
    chatList: {
      handler(newVal, oldVal) {},
      deep: true
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../base/css/_base.scss";
.content-wrap {
  max-width: 750px;
}
.padding-bottom {
  padding-bottom: torem(252px);
}
.page {
  position: fixed;
  top: torem(120px);
  left: 0;
  background: #ebe7e1;
}

/* 医生简介样式 */

.doctor-info-wrap {
  background: #fff;
  box-shadow: 0 torem(6px) torem(10px) 0 rgba(232, 203, 163, 0.46);
  z-index: 10;
  position: fixed;
  left: 0;
  transform: translateY(-110%);
  width: 100%;
  transition: 0.5s;
}

.doctor-info-wrap.active {
  transform: translateY(0);
}

.doctor-wrap {
  padding: torem(31px) torem(28px) torem(10px) torem(28px);
}

.doctor-wrap .avaral-img {
  position: relative;
  margin-right: torem(30px);
}

.avaral-img > img {
  width: torem(119px);
  height: torem(119px);
  border-radius: 50%;
}

.avaral-img .status {
  width: torem(60px);
  height: torem(36px);
  background-color: #008000;
  border-radius: torem(10px);
  font-size: torem(22px);
  color: #fff;
  text-align: center;
  line-height: torem(36px);
  position: absolute;
  left: torem(-10px);
  top: torem(-12px);
}

.avaral-img.busy .status {
  color: #333;
  border: 1px solid #7f7f7f;
  background: #fff;
}

.doctor-info .name {
  color: #333;
  font-size: torem(30px);
  font-weight: bold;
  align-items: center;
}

.doctor-info .name span {
  color: #666;
  font-size: torem(24px);
  font-weight: normal;
  margin-left: torem(20px);
}

.doctor-info .hospital {
  color: #999;
  font-size: torem(22px);
  margin: torem(17px) 0;
}

.doctor-info .label {
  flex-wrap: wrap;
}

.doctor-info .label span {
  font-size: torem(24px);
  border-radius: torem(6px);
  min-width: torem(93px);
  padding: 0 torem(11px);
  height: torem(48px);
  line-height: torem(48px);
  border: solid 1px #bf8440;
  margin-right: torem(19px);
  text-align: center;
  margin-bottom: torem(15px);
}

.online-time {
  padding: torem(23px) torem(30px);
  border-top: 1px solid #bf8541;
}

.online-time .label {
  font-size: torem(30px);
  font-weight: bold;
  margin-right: torem(10px);
}

.online-time .time {
  font-weight: bold;
  color: #333;
  font-size: torem(30px);
  margin-bottom: torem(15px);
  align-items: center;
}

.online-time.ask .time {
  font-size: torem(28px);
  margin-bottom: 0;
}

.online-time .tips {
  color: #808080;
  font-size: torem(24px);
}

.online-time .time span {
  color: #808080;
  font-size: torem(24px);
  font-weight: normal;
  margin-left: torem(10px);
}

/* 聊天区域样式 */

.reword-wrap {
  background: #ebe7e1;
  padding: 0 torem(32px) 0 torem(32px);
  position: relative;
  overflow-y: scroll;
}

.reword-wrap .stage-item:last-child {
  padding-bottom: torem(20px);
}

.reword-wrap .stage-item .stage {
  width: torem(400px);
  height: torem(48px);
  background-color: #dbd6ce;
  border-radius: torem(10px);
  align-items: center;
  justify-content: center;
  color: #9a9183;
  font-size: torem(24px);
  margin: torem(20px) auto;
}

.stage-item .reword-item {
  margin-bottom: torem(10px);
}

.stage-item .reword-item .time {
  color: #9a9183;
  font-size: torem(22px);
  margin-bottom: torem(5px);
  margin-left: torem(128px);
}

.stage-item .reword-item .align-right.time {
  margin-left: 0;
  margin-right: torem(128px);
  text-align: right;
}

.me {
  justify-content: flex-end;
}

.item .item-left {
  align-items: center;
  color: #333;
  font-size: torem(28px);
  margin-right: torem(32px);
}

.item .item-left > span {
  max-width: torem(120px);
}

.me .item-left {
  margin-left: torem(32px);
  margin-right: 0;
}

.item .item-left img {
  width: torem(96px);
  height: torem(96px);
  border-radius: 50%;
  /* margin-bottom: 12px); */
}

.item .item-right {
  display: block;
}

/* 文字样式 */

.me .item-right .text-wrap {
  justify-content: flex-end;
}

.item .item-right .text {
  max-width: torem(446px);
  background-color: #fff;
  border: solid 1px #d6d0c7;
  align-items: center;
  color: #333;
  font-size: torem(28px);
  padding: torem(15px) torem(20px);
  border-radius: torem(10px);
  position: relative;
  word-break: break-all;
}

.me .item-right .text {
  background: #98e165;
}

.doctor .item-right .text::before,
.doctor .item-right .inquiry::before {
  content: "";
  position: absolute;
  right: 100%;
  top: torem(26px);
  width: 0;
  height: 0;
  border-top: torem(12px) solid transparent;
  border-right: torem(12px) solid #fff;
  border-bottom: torem(12px) solid transparent;
}

.me .item-right .text::before,
.me .item-right .inquiry::before {
  content: "";
  position: absolute;
  left: 100%;
  top: torem(26px);
  width: 0;
  height: 0;
  border-top: torem(12px) solid transparent;
  border-left: torem(12px) solid #98e165;
  border-bottom: torem(12px) solid transparent;
}

.item .item-right .status {
  color: #9a9183;
  font-size: torem(22px);
  margin-top: torem(25px);
}

.item .item-right .red-dot {
  width: torem(14px);
  height: torem(14px);
  border-radius: 50%;
  background: red;
  margin: torem(25px) 0 0 torem(22px);
}

.doctor .item-right .status {
  margin-left: torem(20px);
}

.me .item-right .status {
  margin-right: torem(20px);
}

/* 语音样式 */

.item .item-right .voice {
  min-width: torem(80px);
  max-width: torem(379px);
  height: torem(80px);
  align-items: center;
  justify-content: space-between;
  border-radius: torem(10px);
  position: relative;
  padding: 0 torem(30px);
  background: #fff;
  font-size: torem(28px);
  border: solid 1px #d6d0c7;
}

.me .item-right .voice {
  background: #98e165;
  color: #958f7f;
}

.voice img {
  width: torem(20px);
  height: torem(31px);
}

.doctor .voice:before {
  content: "";
  position: absolute;
  right: 100%;
  top: torem(26px);
  width: 0;
  height: 0;
  border-top: torem(12px) solid transparent;
  border-right: torem(12px) solid #fff;
  border-bottom: torem(12px) solid transparent;
}

.me .item-right .voice-wrap {
  justify-content: flex-end;
}

.me .item-right .voice:before {
  content: "";
  position: absolute;
  left: 100%;
  top: torem(26px);
  width: 0;
  height: 0;
  border-top: torem(12px) solid transparent;
  border-left: torem(12px) solid #98e165;
  border-bottom: torem(12px) solid transparent;
}

/* 问诊单样式 */

.item .item-right .inquiry {
  position: relative;
  background-color: #fff;
  border: solid 1px #d6d0c7;
  border-radius: torem(10px);
  width: torem(500px);
}

.inquiry .content {
  color: #333;
  font-size: torem(28px);
  padding: torem(22px);
  border-bottom: 1px solid #d6d0c7;
}

.inquiry .content .mask {
  font-size: torem(22px);
  margin-top: torem(10px);
  color: #999;
}

.inquiry .title {
  color: #333;
  font-size: torem(30px);
  font-weight: bold;
  padding: torem(22px) torem(18px);
  border-bottom: 1px solid #d6d0c7;
}

.inquiry .invalid,
.inquiry .fill.invalid,
.inquiry .title.invalid text,
.inquiry .content.invalid .mask {
  color: #999;
}

.inquiry .title .period {
  width: torem(181px);
  height: torem(53px);
  background-color: #d55940;
  border-radius: torem(4px);
  font-size: torem(24px);
  color: #fff;
  font-weight: bold;
  align-items: center;
  justify-content: center;
}

.inquiry .pharmacy {
  color: #666;
  font-size: torem(24px);
  padding: torem(20px) 0 0 torem(18px);
}

.inquiry .title.sick {
  padding: 0 torem(18px);
  height: torem(70px);
  align-items: center;
  justify-content: space-between;
}

.inquiry .title.recipe {
  display: block;
}

.inquiry .title .overhidden span {
  font-weight: normal;
}

.inquiry .title.sick .sick-name {
  width: torem(270px);
}

.inquiry .title.sick .pay-sick {
  width: torem(340px);
}

.inquiry .title.flex {
  display: flex;
  align-items: center;
}

.inquiry .title .mask {
  color: #666;
}

.inquiry .title > span {
  color: #333;
  font-size: torem(26px);
  font-weight: normal;
  margin-left: torem(10px);
}

.inquiry .title .service {
  flex: 1;
}

.inquiry .title .durg-item {
}

.inquiry .title .subtitle {
  justify-content: center;
  font-size: torem(30px);
  display: flex;
}

.inquiry .fill {
  color: #d55940;
  font-size: torem(32px);
  align-content: center;
  justify-content: center;
  display: flex;
  padding: torem(30px) 0;
}

/* 图片样式 视频样式 */

.item-right .img-wrap {
  position: relative;
  height: torem(240px);
  justify-content: flex-end;
}

.item-right .img-wrap img {
  width: torem(200px);
  height: torem(240px);
  border-radius: torem(6px);
}

.item-right .img-wrap .bg {
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  right: 0;
  top: 0;
  width: torem(200px);
  height: 100%;
  align-items: center;
  justify-content: center;
}

.img-wrap .bg img {
  width: torem(70px);
  height: torem(70px);
}

.img-wrap .video-time {
  position: absolute;
  font-size: torem(24px);
  color: #fff;
  bottom: torem(10px);
  right: torem(10px);
}

/* 支付诊断按钮 */

.pay-for-btn {
  // padding-top: torem(80px);
  justify-content: center;
}
.pay-for-btn > div {
  width: 100%;
  height: torem(80px);
  background-color: #d55940;
  position: fixed;
  left: 0;
  bottom: 0;
  color: #fff;
  font-size: torem(22px);
  align-items: center;
  justify-content: center;
}

.feedback-wrap {
  align-items: center;
  margin-top: torem(20px);
}

.feedback-wrap .feedback-btn {
  width: torem(228px);
  height: torem(60px);
  border-radius: torem(6px);
  border: solid torem(2px) #d55940;
  color: #d55940;
  font-size: torem(22px);
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.feedback-btn img {
  width: torem(38px);
  height: torem(38px);
  margin-right: torem(18px);
}

.feedback-wrap .mask {
  color: #a8a8a8;
  font-size: torem(22px);
  padding: torem(20px) 0;
}

/* 底部样式 */

.choose-wrap {
  position: fixed;
  bottom: torem(110px);
  left: 0;
  right: 0;
  max-width: 750px;
  margin: 0 auto;
  padding: 0 torem(112px);
  justify-content: space-between;
  background: #fff;
  width: 100%;
  z-index: 100;
  height: torem(140px);
  align-items: center;
  font-size: torem(24px);
  color: #bf8541;
  border-bottom: torem(2px) solid #f2e3d0;
}

.choose-wrap .choose-item {
  align-items: center;
  position: relative;
}
.choose-wrap .input-file {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.choose-wrap .choose-item img {
  width: torem(74px);
  height: torem(74px);
  margin-bottom: torem(10px);
}

.footer {
  height: torem(110px);
  background: #fff;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  color: #bf8440;
  font-size: torem(22px);
  padding: 0 torem(31px);
  align-items: center;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

.footer .keyboard,
.footer .picture {
  align-items: center;
  justify-content: flex-end;
}

.footer .keyboard img {
  width: torem(74px);
  height: torem(74px);
  margin-right: torem(22px);
}

.footer .voice {
  width: torem(593px);
  height: torem(74px);
  border-radius: torem(36px);
  color: #bf8541;
  font-size: torem(34px);
  border: solid torem(2px) #f2e3d0;
  align-items: center;
  justify-content: center;
}

.footer .voice.hover {
  background: #ede7df;
}

.footer .input {
  align-items: center;
  height: 100%;
  width: 100%;
}

.footer .input input {
  padding: 0 torem(40px);
  height: torem(74px);
  border-radius: torem(36px);
  flex: 1;
  border: solid torem(2px) #f2e3d0;
  font-size: torem(28px);
  margin-right: torem(22px);
}

.footer .input .send-btn {
  color: #d34a2e;
  font-size: torem(34px);
  height: 100%;
  align-items: center;
}
.footer .voice.hover{
  background: #ede7df;
}
.footer .voice img {
  width: torem(26px);
  height: torem(36px);
  margin-right: torem(22px);
}

.footer .picture img {
  width: torem(48px);
  height: torem(39px);
  margin-top: torem(9px);
  margin-bottom: torem(10px);
}

/* 打赏按钮 */

.enjoy {
  position: fixed;
  right: torem(27px);
  bottom: torem(300px);
  width: torem(100px);
  height: torem(100px);
  align-items: center;
  justify-content: center;
  transform-origin: top center;
  /* animation: swing 3s infinite; */
}

.enjoy img {
  width: torem(68px);
  height: torem(72px);
}

@keyframes swing {
  10% {
    transform: rotate(20deg);
  }

  20% {
    transform: rotate(-15deg);
  }

  30% {
    transform: rotate(5deg);
  }

  40% {
    transform: rotate(-5deg);
  }

  50%,
  100% {
    transform: rotate(0deg);
  }
}

/* 弹窗 */

.windows {
  width: torem(560px);
  background: #fff;
  border-radius: torem(10px);
  z-index: 1100;
}

.windows .title {
  padding: torem(30px) 0;
  color: #333;
  font-size: torem(30px);
  font-weight: bold;
  justify-content: center;
  position: relative;
  width: 100%;
  height: torem(91px);
  border-bottom: 1px solid #d6d0c7;
}

.windows .title.noborder {
  border-bottom: 0;
}

.windows .title img {
  width: torem(50px);
  height: torem(50px);
}

.windows .title .close-wrap {
  width: torem(100px);
  height: torem(100px);
  position: absolute;
  align-items: center;
  justify-content: flex-end;
  right: torem(20px);
  top: 50%;
  transform: translateY(-50%);
}

/* 支付咨询费 */

.windows .project {
  color: #333;
  font-size: torem(28px);
  margin-bottom: torem(20px);
}

.windows .projrct-wrap {
  padding: 0 torem(40px) torem(40px) torem(40px);
}

.windows .project .label {
  font-size: torem(30px);
  font-weight: bold;
}
.windows .project .txt {
  flex: 1;
}

.windows .project .price {
  color: #d55940;
}

.windows .mask {
  color: #4d4d4d;
  font-size: torem(24px);
  margin: torem(30px) auto torem(60px);
  justify-content: center;
}

.windows .pay-btn {
  width: torem(269px);
  height: torem(86px);
  background-color: #d55940;
  border-radius: torem(6px);
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: torem(32px);
  margin: 0 auto;
  font-weight: bold;
}

/* 感谢金 */

.windows .gratitude-wrap {
  padding: torem(30px);
  flex-wrap: wrap;
  justify-content: space-between;
}

.gratitude-wrap .gratitude-item {
  min-width: torem(100px);
  padding: 0 torem(20px);
  height: torem(60px);
  border-radius: torem(6px);
  border: solid torem(2px) #999;
  align-items: center;
  justify-content: center;
  font-size: torem(28px);
  color: #666;
}

.gratitude-wrap .gratitude-item.active {
  border: solid 1px #d55940;
  color: #d55940;
}

.windows .other-money {
  color: #333;
  font-size: torem(28px);
  align-items: center;
  margin: torem(30px) 0 torem(60px) torem(30px);
}

.windows .other-money input {
  width: torem(240px);
  height: torem(60px);
  border-radius: torem(6px);
  border: solid torem(2px) #d55940;
  padding-left: torem(15px);
  margin: 0 torem(20px);
}

.windows .other-money input.disabled {
  border: solid torem(2px) #999;
}

/* 评价分 */

.evaluate-wrap {
  padding: 0 torem(40px) torem(40px) torem(40px);
}

.evaluate-wrap .label {
  color: #333;
  font-size: torem(28px);
  margin: torem(30px) 0 0 0;
}

.evaluate-wrap .grade {
  justify-content: space-between;
}

.grade .grade-item {
  color: #666;
  font-size: torem(26px);
  align-items: center;
  padding: torem(30px) torem(20px);
}

.grade .grade-item.active {
  color: #333;
}

.grade .grade-item img {
  width: torem(48px);
  height: torem(48px);
  margin-right: torem(10px);
}

.windows .remark {
  color: #333;
  font-size: torem(28px);
  margin-top: torem(10px);
}

.windows .remark textarea {
  width: torem(380px);
  height: torem(160px);
  border-radius: torem(6px);
  border: solid torem(2px) #d55940;
  padding: torem(20px);
  margin-left: torem(10px);
  font-size: torem(28px);
}

.evaluate-wrap .remark-list {
  justify-content: space-between;
  flex-wrap: wrap;
  margin: torem(30px) 0;
}

.remark-list .remark-item {
  min-width: torem(110px);
  padding: torem(10px) torem(15px);
  height: torem(50px);
  border-radius: torem(6px);
  border: solid torem(2px) #d55940;
  color: #d55940;
  font-size: torem(22px);
  align-items: center;
  justify-content: center;
  margin-bottom: torem(20px);
}

.remark-list .remark-item.active {
  background: #d55940;
  color: #fff;
}

/*填写诊断表*/

.from-wrapper {
  flex: 1;
  background: #fff;
  position: relative;
}

.from-wrapper::before {
  content: "";
  position: absolute;
  left: 100%;
  top: torem(26px);
  width: 0;
  height: 0;
  border-top: torem(12px) solid transparent;
  border-left: torem(12px) solid #fff;
  border-bottom: torem(12px) solid transparent;
}

.from-title {
  border-bottom: 1px solid #bf8541;
  height: torem(105px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.from-title span:nth-child(1) {
  font-size: torem(28px);
  font-weight: 600;
  margin-bottom: torem(5px);
}

.from-title span:nth-child(2) {
  margin-left: torem(40px);
  font-size: torem(28px);
}

.from-wrapper .from-content {
  padding: torem(20px);
}

.from-content .ht-msg {
  display: flex;
  align-items: center;
  margin-bottom: torem(16px);
}

.ht-msg .height span:nth-child(1),
.ht-msg .weight span:nth-child(1) {
  font-size: torem(28px);
  font-weight: 600;
}

.ht-msg .height span:nth-child(2),
.ht-msg .weight span:nth-child(2) {
  font-size: torem(28px);
  margin-left: torem(10px);
}

.ht-msg .weight {
  margin-left: torem(40px);
}

.symptoms-des {
  margin-bottom: torem(16px);
}

.symptoms-des span:nth-child(1) {
  font-size: torem(28px);
  font-weight: 600;
  word-break: break-all;
}

.symptoms-des span:nth-child(2) {
  /* line-height: 42px); */
  margin-left: torem(10px);
  font-size: torem(28px);
  flex: 1;
  display: flex;
  word-break: break-all;
}

.symptoms-img {
  display: flex;
}

.symptoms-img span {
  font-size: torem(28px);
  font-weight: 600;
  white-space: nowrap;
}

.symptoms-img .img-wrapper {
  display: flex;
  flex-flow: wrap;
  margin: torem(6px) 0 0 torem(10px);
}

.symptoms-img .img-wrapper img {
  width: torem(130px);
  height: torem(130px);
  margin: 0 torem(12px) torem(12px) 0;
}

.symptoms-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: torem(10px);
}

.symptoms-question div:nth-child(1) {
  font-size: torem(28px);
  font-weight: 600;
}

.symptoms-question div:nth-child(2) {
  font-size: torem(28px);
  width: torem(160px);
  height: torem(50px);
  align-items: center;
  justify-content: center;
  border-radius: torem(25px);
  border: solid torem(2px) #d34a2e;
  color: #d34a2e;
}

.symptoms-detail {
  margin-top: torem(10px);
  font-size: torem(28px);
  line-height: torem(40px);
  word-break: break-all;
}

/* 新消息 */

.new-info {
  position: fixed;
  width: torem(250px);
  height: torem(60px);
  right: -100%;
  bottom: torem(300px);
  border-top-left-radius: torem(30px);
  border-bottom-left-radius: torem(30px);
  align-items: center;
  justify-content: center;
  font-size: torem(28px);
  background: #d34a2e;
  color: #fff;
  transition: all 0.5s;
}

.new-info.active {
  right: 0;
}

.btn {
  position: fixed;
  left: torem(10px);
  bottom: torem(300px);
}

.gif-wrap {
  width: torem(250px);
  height: torem(250px);
  border-radius: torem(10px);
  background: rgba(0, 0, 0, 0.6);
  font-size: torem(28px);
  color: #fff;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.gif-wrap img {
  width: torem(80px);
  height: torem(120px);
}

.online {
  height: torem(70px);
  width: 100%;
  background: #db5033;
  color: #fff;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  font-size: torem(26px);
  opacity: 0;
}

.online.underLine {
  opacity: 1;
}

.payfee {
  position: fixed;
  left: torem(10px);
  bottom: torem(300px);
}

//预览图片样式
.previewImg-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: #000;
  align-items: center;
  justify-content: center;
  z-index: 100;
  img,
  video {
    max-width: 100%;
    max-height: 100%;
  }
  .close-img {
    width: torem(50px);
    height: torem(50px);
    position: fixed;
    right: torem(30px);
    top: torem(30px);
  }
}
</style>